<template>
  <div class="flight_filter">
    <div class="flight_filter_row1">
      <div class="flight_filter_info">单程： {{info.departCity}} - {{info.destCity}} / {{info.departDate}} </div>
      <el-form
        size="mini"
        class="flight_filter_form"
      >
        <el-form-item
          class="filter_form_select"
          v-for="(item,index) in  filterOptions"
          :key="index"
        >
          <el-select
            :placeholder="item.placeholder"
            v-model="selectValues[index]"
          >
            <el-option
              v-for="(item2,index2) in item.list"
              :key="index2"
              :label="item2.label"
              :value="item2.value"
            ></el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>
    <div class="flight_filter_row2">
      <span>筛选:</span>
      <el-button
        type="primary"
        size="mini"
        round
        @click="selectValues=['','','','']"
      >撤销</el-button>
    </div>

  </div>
</template>

<script>
export default {
  /* 
  info:{
    departCity: "广州"
departDate: "2020-08-31"
destCity: "北京"
  }
   */
  props: ["info", "options"],
  data() {
    return {
      // 下拉框 选中的值
      selectValues: ["", "", "", ""],
    };
  },
  computed: {
    filterOptions() {
      // 负责将 this.options(对象) 转成一个数组  方便我们在视图中循环 select
      const list = [];

      // 1 将 起飞机场 转成数组中元素 {label value }
      list.push({
        placeholder: "起飞机场",
        list: this.options.airport.map((v) => ({ label: v, value: v })),
      });

      // 2 将 起飞时间  转成数组中元素 {label value }
      list.push({
        placeholder: "起飞时间",
        list: this.options.flightTimes.map((v) => ({
          label: `${v.from}:00 - ${v.to}:00`,
          value: v.from + "|" + v.to,
        })),
      });
      // 3 将 航空公司  转成数组中元素 {label value }
      list.push({
        placeholder: "航空公司",
        list: this.options.company.map((v) => ({ label: v, value: v })),
      });

      // 4 将 机型  转成数组中元素 {label value }
      list.push({
        placeholder: "机型",
        list: [
          { label: "大", value: "L" },
          { label: "中", value: "M" },
          { label: "小", value: "S" },
        ],
      });
      return list;
    },
  },
  watch: {
    // 监听 下拉框的值的改变 => 用户都希望 机票列表能显示 筛选后的机票数据 
    selectValues(values) {
      // 将值发送给父元素
      this.$emit("filterValueChange", values);
    },
  },
};
</script>

<style lang="less" scoped>
.flight_filter {
  margin-top: 20px;
  .flight_filter_row1 {
    display: flex;
    justify-content: space-between;
    height: 28px;
    align-items: center;
    .flight_filter_info {
      font-size: 14px;
    }
    .flight_filter_form {
      height: 100%;
      display: flex;
      align-items: center;
      .filter_form_select {
        width: 112px;
        margin-left: 10px;
        margin-bottom: 0;
      }
    }
  }
  .flight_filter_row2 {
    margin: 10px 0;
    span {
      font-size: 14px;
    }
  }
}
</style>